cr/src/view/accessories/pagination.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>名称 <input type="text" style="width: 108px"  v-model="form_copy.name"/></td>
        </tr>
        <tr>
          <td>
              字高 <input type="text" v-model="form_copy.fontSize"/>
              三角形高 <input type="text" v-model="form_copy.graphicHeight"/>
          </td>
        </tr>
        <tr>
          <td>三角形与两边距离 <input type="text" v-model="form_copy.graphicMargin" /></td>
        </tr>
        <tr>
          <td>方框与两边距离 <input type="text" v-model="form_copy.boxMargin" /></td>
        </tr>
        <tr>
          <td>1与——距离 <input type="text" v-model="form_copy.hyphenLeftMargin" /></td>
        </tr>
        <tr>
          <td>/与0距离 <input type="text" v-model="form_copy.slashRightMargin" /></td>
        </tr>
        <tr>
          <td >
           <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" style="width:895px">
        <div class="pagination_type" :style="{fontSize:form.fontSize+'px'}">
            <input type="radio" name="pagination_type" value="1" :checked="form.type==1" v-model="form.type"/>
            0
            <label :style="{marginRight:form.slashRightMargin+'px'}">/</label>
            0
        </div>
        <div class="pagination_type" :style="{fontSize:form.fontSize+'px'}">
            <input type="radio" name="pagination_type" value="2" :checked="form.type==2"  v-model="form.type"/>
            <div class="triangle-left"  :style="{borderTop:form.graphicHeight/2+'px solid transparent',
            borderBottom:form.graphicHeight/2+'px solid transparent',borderRight:form.graphicHeight+'px solid '+form.color,
            marginRight:form.graphicMargin+'px'}"></div>
            1
            <label :style="{marginLeft:form.hyphenLeftMargin+'px'}">-</label> 
            <input type="text" v-model="form.content" :style="{marginLeft:form.boxMargin+'px',marginRight:form.boxMargin+'px'}" /> 
            <label :style="{marginRight:form.slashRightMargin+'px'}">/</label>
            00
            <div class="triangle-right"  :style="{borderTop:form.graphicHeight/2+'px solid transparent',
            borderBottom:form.graphicHeight/2+'px solid transparent',borderLeft:form.graphicHeight+'px solid '+form.color,
            marginLeft:form.graphicMargin+'px'}"></div>
        </div>
        <div class="pagination_type" :style="{fontSize:form.fontSize+'px'}">
            <input type="radio" name="pagination_type" value="3"  :checked="form.type==3" v-model="form.type" />
            <div class="triangle-left"  :style="{borderTop:form.graphicHeight/2+'px solid transparent',
            borderBottom:form.graphicHeight/2+'px solid transparent',borderRight:form.graphicHeight+'px solid '+form.color,
            marginRight:form.graphicMargin+'px'}"></div>
            1
            <label :style="{marginLeft:form.hyphenLeftMargin+'px'}">-</label> 
            <input type="text" v-model="form.content" :style="{marginLeft:form.boxMargin+'px',marginRight:form.boxMargin+'px'}" /> 
            <label :style="{marginRight:form.slashRightMargin+'px'}">/</label>
            000
            <div class="triangle-right"  :style="{borderTop:form.graphicHeight/2+'px solid transparent',
            borderBottom:form.graphicHeight/2+'px solid transparent',borderLeft:form.graphicHeight+'px solid '+form.color,
            marginLeft:form.graphicMargin+'px'}"></div>
        </div>
    </div>
  </div>
</section>
</template>
 

<script>
let findAll = function() {
  this.$axios.get("/api/accessories/pagination/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/pagination/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: {
        color:'red'
      }
    };
  },
  mounted: function() {
    this.findAll();
  },
  methods: {
    findAll,
    fittingSave,
    fittingEdit,
    settingShow,
    fittingPreview
  }
};
</script>

<style scoped>

#Attribute {
    padding: 20px 15px 30px;
}
#Attribute table tr td {
    height: 28px;
    padding: 0;
}

#Attribute table tr td input[type="text"] {
    width: 30px;
}

input[type="radio"] {
    border-radius:0% 0%;
}

.triangle-left { 
width: 0; 
height: 0; 
border-top: 7px solid transparent; 
border-right: 14px solid red; 
border-bottom: 7px solid transparent; 
margin-bottom: -2px;
} 

.triangle-right { 
width: 0; 
height: 0; 
border-top: 7px solid transparent; 
border-left: 14px solid red; 
border-bottom: 7px solid transparent; 
margin-bottom: -2px;
} 

.pagination_type{
  display: inline-block;
  width: 295px;
  margin-top: 50px;
}

.pagination_type >input,.pagination_type>div,.pagination_type>label{
  display: inline-block;
}

.pagination_type input[type="text"]{
  width: 30px;
}
</style>