vue中点击输入框弹出事件

写了个关于常用语的管理：

1.在输入内容时出现常用语的列表；

2.点击内容放入输入框中；

3.点击列表上的设置按钮，可对常用语进行管理。

代码部分：

点击输入框时在其下方出现一个框用来显示常用于的列表，用了一个  <el-popover placement="bottom" width="300" trigger="click"> </el-popover>    Popover弹出框

 

<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>

 

其中 <el-input></el-input> 中是页面的输入框，其他的为弹出框内容

 

数据通过后台列表显示方法拿到：

<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>

 

点击常用语设置按钮之后，根据路径跳转到管理页面进行管理。