cr/src/view/accessories/button.vue

<template>
<section>
  <div id="setting" >
    <div id="Attribute">
      <div style="color: red;font-weight: bolder;text-align: center;font-size: 14px;">按 键</div>
      <table :title="form && form.id ? '编辑' : '新增' "  :model="form">
        <tr>
          <td>名称</td>
          <td colspan="3"><input type="text" v-model="form_copy.name"/></td>
        </tr>
        <tr>
          <td>框长</td>
          <td colspan="3">
            <input type="text" style="width:50px;margin-right: 14px;" v-model="form_copy.width" />
            框高
            <input type="text" style="width:50px" v-model="form_copy.height"/></td>
        </tr>
        <tr>
          <td>字体</td>
          <td>
            <select v-model="form_copy.fontFamily"  style="width:80px;border: #0342c5 1px solid;">
              <option value="黑体">黑体</option>
              <option value="楷体">楷体</option>
              <option value="微软雅黑">微软雅黑</option>
              <option value="宋体">宋体</option>
            </select>
          </td>
          <td>字高</td>
          <td><input type="text" v-model="form_copy.fontSize"/></td>
        </tr>
        <tr>
          <td>字组</td>
          <td colspan="3"><input type="text" v-model="form_copy.content" /></td>
        </tr>
        <tr>
          <td colspan="4">
           <label>着色 <input type="color"  v-model="form_copy.color" style="width: 40px;"/></label>
            &nbsp;
            <button type="primary"  @click="fittingPreview">预览</button>
            &nbsp;
            <button type="primary"  @click="fittingSave">提交</button>
          </td>
        </tr>
      </table>
    </div>
    <div id="fitting">
      <input type="button"  id="fitting_button" v-bind:style="{width:form.width+'px',height:form.height+'px',fontFamily:form.fontFamily,fontSize:form.fontSize+'px',background:form.color}" v-bind:value="form.content"/>
    </div>
  </div>
</section>
</template>
 

<script>
let findAll = function() {
  this.$axios.get("/api/accessories/button/findAll").then(response => {
      if (response.data.code == 0) {
        this.rows = response.data.list;
      }
    })
    .catch(error => {
      console.log(error);
      this.message = error;
    });
};

let fittingSave = function(){
   this.$axios.post('/api/accessories/button/saveOrUpdate', this.form).then(response => {
     if (response.data.code == 0) {
        this.findAll()
        this.form = {}
      }
   })
   .catch(error => {
      console.log(error);
      this.message = error;
    });
}

let fittingEdit = function(index){
  this.form = this.rows[index]
}

let settingShow = function(){
  this.form = {}
}

let fittingPreview = function(){
  this.form =  Object.assign({}, this.form_copy)
}

export default {
  data() {
    return {
      rows: [],
      form: {},
      form_copy: {}
    };
  },
  mounted: function() {
    this.findAll();
  },
  methods: {
    findAll,
    fittingSave,
    fittingEdit,
    settingShow,
    fittingPreview
  }
};
</script>