vue input box, click the pop-up event

He wrote about the common language of management:

1. The list of commonly used words appear while you're typing;

2. Click the content into the input box;

3. Click the Settings button on the list, it can be managed common language.

Code section:

A box appears when clicking the input box below it to display a list of commonly used, with a  < EL-the popover Placement = "bottom" width = "300" Trigger = "the Click" > </ EL-the popover>    the popover popup

 

<el-popover
    placement="bottom"
    width="300"
    trigger="click">

    <el-table
      :data="dataList"
      border
      style="width: 100%;">
      <el-table-column
        fixed="left"
        prop="content"
        label="常用语">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="showState(scope.row.content)">{{scope.row.content}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form><el-form-item></el-form-item></el-form>

    <div style="text-align: center">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-button  type="primary" style="display:block;margin:0 auto" @click="addOrUpdateHandle()">设置常用语</el-button>
      </el-form-item>
    </el-form>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>

      <el-input slot="reference" v-model="obj" style="width:300px" placeholder="请输入内容"></el-input>

  </el-popover>

 

Wherein <el-input> </ el-input> page is input box, the other for the contents popup

 

To get the data back through the list of display method:

<script>
  import AddOrUpdate from './cyy_apply'
  export default {
    data () {
      return {
        dataList: [],
        addOrUpdateVisible: false,
        obj: ''
      }
    },
    components: {
      AddOrUpdate
    },
    mounted () {
      this.getDataList()
    },
    activated () {
      this.getDataList()
    },
    methods: {
      showState (val) {
        this.obj = val
      },
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/cyy/apply/selectByCreateUserId'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
          } else {
            this.dataList = []
          }
        })
      },
      // 常用语设置
      setLanguage (id) {
        this.$nextTick(() => {
          this.$router.push({name: 'cyy_apply'})
        })
      }
    }
  }
</script>

 

After clicking the Settings button common language, according to the path jump to the management page to manage.

 

Guess you like

Origin www.cnblogs.com/BKhp/p/11504773.html