ok

components/page/actions.vue

 <template>
-  <ul class="actions">
-    <li class="item" v-for="(li, i) in items" @click="detail(li)">
+  <div class="actions">
+    <div
+      :class="li.confirm ? 'confirm' : 'item'"
+      v-for="(li, i) in items"
+      @click="detail(li)"
+    >
       <span v-if="mode == 'text'" class="text" v-text="li.label"></span>
       <Tooltip v-if="mode == 'icon'" :content="li.label"
         ><Icon :type="li.icon"
@@ -9,8 +13,8 @@
         <Icon type="li.icon" />
         <span class="text" v-text="li.label"></span>
       </div>
-    </li>
-  </ul>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -29,9 +33,14 @@ export default {
         return [
           { label: "复制", icon: "md-copy", vclick: "" },
           { label: "新增", icon: "md-add", vclick: "" },
-          { label: "删除", icon: "md-trash", vclick: "" },
+          { label: "删除", icon: "md-trash", vclick: "", confirm: true },
           { label: "移动", icon: "md-move", vclick: "" },
-          { label: "派发", icon: "ios-alarm", vclick: "" },
+          {
+            label: "派发",
+            icon: "ios-alarm",
+            vclick: "",
+            confirm: "确认要进行派发吗？",
+          },
         ];
       },
     },
@@ -77,17 +86,32 @@ export default {
 </script>
 
 <style lang="less">
+@size:20px;//按钮大小
+@distince:5px;//按钮间距
+@color:black;//主色
+@color-hover:#106ffe;//主悬浮色
+@color-confirm:red;// 二次确认色
 .actions {
-  ul {
-    li {
-      float: left;
-      list-style: none;
-      width: 20px;
-      height: 20px;
-      text-align: center;
-      margin-left: 5px;
-      color: red;
-    }
+  display: inline-block;
+  .item,
+  .confirm {
+    display: inline-block;
+    list-style: none;
+    width: @size;
+    height: @size;
+    text-align: center;
+    margin-left:@distince;
+    cursor: pointer;
+    border: 1px dotted @color;
+    line-height: @size;
+  }
+  .item:hover {
+    border: 1px solid @color-hover;
+    color: @color-hover;
+  }
+  .confirm:hover {
+    border: 1px solid @color-confirm;
+    color: @color-confirm;
   }
 }
 </style>
\ No newline at end of file

pages/project/plan/index.vue

@@ -79,18 +79,19 @@ export default {
           key: "action",
           width: 150,
           align: "center",
-        //   render:(h,params)=>{
-        //       return h("Actions"
-        //       ,{
-        //         attrs:{
-        //             row:params,
-        //         },
-        //         on:{
-        //             'on-click':()=>this.rowclick
-        //         }
-        //       }
-        //       )
-        //   }
+          render:(h,params)=>{
+              return h("Actions"
+              ,{
+                attrs:{
+                    row:params,
+                   
+                },
+                on:{
+                     'on-click':this.rowclick
+                }
+              }
+              )
+          }
         //   render: (h, params) => {
         //     return h("div", { class: "action" }, [
         //       h(