vue 小窗口

Posted lei0913

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 小窗口相关的知识,希望对你有一定的参考价值。

  所谓小窗口

技术图片

 

 比如这个样子的窗口,其实他和新弹出页面没有太大的区别 但是新的窗口需求在实际设计中也是很多的,

美观简洁 操作方便 不用跳转 都是他的优点

以下是小窗口的简单小栗子  内容不多 希望对您的设计有所帮助

<el-table-column
          label="操作"
          prop="id"
        >


          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="250"
              trigger="click"
            >
                <table class="chuna-alert-table">
                  <tr>
                    <td>订单号:{{scope.row.order_number}}</td></tr>
                  <tr>
                    <td><textarea v-model="form.deposit_finance_remark" placeholder="add multiple lines"></textarea></td>
                  </tr>
                  <tr>
                    <td><textarea v-model="form.mc_deposit_money" placeholder="实际缴纳担保金额"></textarea></td>
                  </tr>
                  <tr>
                    <td colspan="2" @click="setDepositRatioConfirmation(scope.row.order_number)"><el-button>确定</el-button></td>
                  </tr>
                </table>
            <el-button slot="reference" type="primary">财务操作</el-button>
            </el-popover>
          </template>
        </el-table-column>

 

以上是关于vue 小窗口的主要内容,如果未能解决你的问题,请参考以下文章

小技巧

html 有关如何在任何页面上插入Nuvo Express按钮的小片段。此按钮居中对齐,并在新窗口中打开目标URL。

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置