【难为听】weex-ui

eslint 不喜欢，但是确实规范了代码，同古代统一货币一样，有无穷的意义。故喜欢
weex-ui在项目中的使用方法

npm install -g weex-toolkit@latest
weex create your_project
npm i
npm i weex-ui@latest -S
npm i babel-plugin-component babel-preset-stage-0 -D

//修改.babelrc代码
{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages",
        "style": false
      }
    ]
  ]
}

修改 src/index.vue 进行测试

<template>
  <div>
    <wxc-button text="Open Popup"
                @wxcButtonClicked="buttonClicked">
    </wxc-button>
    <wxc-popup width="500"
               pos="left"
               :show="isShow"
               @wxcPopupOverlayClicked="overlayClicked">
    </wxc-popup>
  </div>
</template>

<script>
  import { WxcButton, WxcPopup } from 'weex-ui';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

运行项目
npm run serve
项目效果如下

转载于:https://www.cnblogs.com/smart-girl/p/10950308.html