vue shells moving end frame assembly, vue-layer-mobile

Recently made a mobile terminal project, playing the box to write too much trouble to find information, find this component, but the documentation is relatively small, under their own research, I came across the wrong share, and detailed usage for everyone! There are open questions can take a look at the components, this component is a fake layer-mobile, a lot of usage are the same, you can see Oh!

　　A, npm install

// current version 1.2.0 
npm install vue-layer-mobile
// encounter problems such as the new version of the old version rollback 
npm install [email protected]

 

　　Second, adjust the configuration: Because this component has woff, ttf, eto, svg file types, so you want to configure some of the loader,　　　

// webpack.config.js arranged as follows, first install the url-loader and file-loader:
{ test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

 

　　　Third, the introduction and use of

import 'vue-layer-mobile/need/layer.css'
import layer from 'vue-layer-mobile'
Vue.use(layer)

 

　　Fourth, the use of the specific description: - The assembly method of a total of six, are not completely simulated layer-mobile, simple elastic frame or a good use.

　　　　　// toast: the text and icons:
        testLayerToast () {        
            this.$layer.toast({
              icon: 'icon-check', // icon clssName if located below the empty position toast, or center 
              content: 'prompt text'
              time: 2000 // automatically disappear time toast default type disappearing time of 2000 ms 
            })
        },
        // loading:
        testLayerLoading1 () {
            var _this = this;
            . This $ layer.loading ( 'Loading ...');
            setTimeout(function(){
                _this.$layer.close();
            },3000);
        },
        // dialog:
        testLayerDialog () {
            this.$layer.dialog({
              title: [ 'This is the title', 'background: red;'], // is the title of the first contents of the second style is the title bar (can be null) 
              content: 'This is what'
              contentClass: 'className',
              btn: [ 'cancel', 'OK'],
            //   time: 2000
            })
            // If there btn 
            .then(function (res){
              // res is 0 user clicks the left to the right when a user clicks 
              let position = res === 0 ? 'left' : 'right'
               console.log(position)
             })
        },
        // footer:
        testLayerFooter () {
            this.$layer.footer({
              content: 'This is what'
              btn: [ 'cancel', 'Option 1', 'Option 2']
            })
            // If there btn 
            .then(function (res){
              ? Var text = res == 0 'Cancel': 'option' + res
              console.log(text)
            })
        },
        //open
        testLayerOpen () {
            this.$layer.open({
                style: 'border:none; background-color:#78BA32; color:#fff;',
                content: 'Content'
            })
        },
        //close
        testLayerClose () {
            var _this = this;
            . This $ layer.loading ( 'off Test Method');
            setTimeout(function(){
                _this.$layer.close();
            },3000);
        }

 

Several results show:

  

 

      

 

  

 

 

 

 

 

 

 

The company projects not publicly, there is no time to sort out alone, so the source code is not uploaded.

 

　　Component address: https: //www.npmjs.com/package/vue-layer-mobile

　　Reference: Mobile open source plug-Layer  http://layer.layui.com/mobile/

 

 

 

.