仿制element-ui按钮组件（一）

这里我想做一个按钮组件的页面，左边放置按钮组件，右边是按钮组件的属性选择下拉框。我可以选为按钮定义的属性，然后在左边的按钮上面体现。

第一步-安装element-ui,配置select。

这里我遇到一个问题，如上图，element-ui的组件引入之后没有生效：
从以下入手检查：
1.安装依赖
2.加载样式
3.加载js
4.安装组件
5.使用组件
找到原因，vue中使用要在main.js文件中引入

import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"

Vue.use(ElementUI)

可以了。

第二步-我们为了实现button和select的数据的联动，准备用jq处理这个。
1.首先安装jq的依赖(使用淘宝镜像比较快)

cnpm install jquery --save

2.修改配置文件webpack.base.conf.js
这里主要改啥呢，第一，引入webpack

第二，配置添加jq的插件

第三，去页面引入。即可使用。

第三步-实现联动按钮和select（思路是使用vue的v-model双向绑定机制）
上效果

粘贴app.vue父组件源码：

<template>
  <div id="app">
    <div id="content">
      <!-- <div class="box" v-for="item in configs" :key="item.type"> -->
      <!-- :buttonSize=".buttonSize" -->
      <div class="box">
        <etButton
          :buttonSize="selectSize"
          :type="selectType"
          :radius="selectRadius"
          :btnText="btnText"
          :isdisabled="isdisabled"
        ></etButton>
        <div class="box-text">
          <p>尺寸：(可选择：小号，中号，大号)</p>
          <el-select
            id="configSelect"
            v-model="selectSize"
            placeholder="请选择"
          >
            <el-option
              v-for="item in sizes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p>类型：(可选择：正常，告警，警告)</p>
          <el-select
            id="configSelect"
            v-model="selectType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p>圆角：(可选择：10%，20%，30%)</p>
          <el-select
            id="configSelect"
            v-model="selectRadius"
            placeholder="请选择"
          >
            <el-option
              v-for="item in radius"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p>禁止点击：(可选择：是  否)</p>
          <el-switch
            v-model="isdisabled"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
          <!-- <input v-bind="item.type">大小：{{item.buttonSize}}</input> -->
        </div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import etButton from "./components/sweet-button/sweetbutton.vue";

export default {
  name: "App",
  components: {
    etButton,
  },
  data() {
    return {
      selectSize: "",
      selectType: "",
      selectRadius: "",
      isdisabled: false,
      btnText: "请点击",
      configs: [
        {
          type: "normal",

          buttonSize: "mid",
        },
        {
          type: "warning",

          buttonSize: "small",
        },
      ],
      sizes: [
        {
          label: "小号",
          value: "small",
        },
        {
          label: "中号",
          value: "mid",
        },
        {
          label: "大号",
          value: "large",
        },
      ],
      types: [
        {
          label: "正常",
          value: "normal",
        },
        {
          label: "告警",
          value: "warning",
        },
        {
          label: "警告",
          value: "alarm",
        },
      ],
      radius: [
        {
          label: "10%",
          value: "little",
        },
        {
          label: "20%",
          value: "few",
        },
        {
          label: "30%",
          value: "much",
        },
      ],
    };
  },
  computed: {
    getType: function () {
      // let temp = $("#configSelect");
    },
  },
  mounted() {
    // let temp = $("#configSelect");
    // console.log("caohan", temp);
  },
  methods: {
   
  },
};
</script>

<style>
#app {
  /* font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50; */
  /* margin-top: 60px; */
  width: 100%;
  height: 800px;
}
#content {
  /* display: flex;
  align-items: center; */
  /* justify-content: space-around; */
  /* flex-direction: column; */
}
.box {
  width: 1000px;
  height: auto;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: darkgray;
  margin-top: 20px;
}

</style>