action-sheet使用

最新推荐文章于 2025-05-21 17:41:36 发布

原创最新推荐文章于 2025-05-21 17:41:36 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#action-sheet #mint-ui #动态绑定属性

前端专栏收录该内容

58 篇文章

订阅专栏

本文探讨了在使用Mint-UI组件Action-Sheet时，如何通过循环给数组绑定name属性和method，实现动态获取点击项的值。通过innerText函数接收点击事件并获取当前对象的name属性，满足了从后端动态获取数据的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用mint-ui组件的action-sheet时遇到这样一个问题：就是name属性我是从后端传过来的，但是要获得每次点击的值。

官网提供的写法

html

<mt-actionsheet
  :actions="actions"
  :visible.sync="sheetVisible">
</mt-actionsheet>

<script>
export default {
  name: 'hello',
  data () {
    return {
      // action sheet 选项内容
      data: [{
        name: '拍照',
        method : this.getCamera	// 调用methods中的函数
      }, {
        name: '从相册中选择', 
        method : this.getLibrary	// 调用methods中的函数
      }],
      // action sheet 默认不显示，为false。操作sheetVisible可以控制显示与隐藏
      sheetVisible: false
    }
  },
  methods: {
    actionSheet: function(){
    	// 打开action sheet
      this.sheetVisible = true;
    },
    getCamera: function(){
      console.log("打开照相机")
    },
    getLibrary: function(){
      console.log("打开相册")
    }
  }
}
</script>

由于我的需求是通过循环给数组绑定name属性和method，代码如下：

for(let i=0;i<res.data.list.length;i++){
   this.returnReasons[i]={
         name:res.data.list[i].name,
         method:this.innerText
     }
 }

innerText(e){    //可以通过e来获取当前点击的对象的name属性
  this.refundReason=e.name;
 },