VUE_render渲染函数基础使用，使用render函数创建自定义按钮

妖狐艹你老母 2022-11-04 00:51 314阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

# 创建组件button #

components/button.vue

<script> export default { props:{ type:{ type:String, default:"" }, text:{ type:String, default:"" } }, render(h) { //h：createElement return h('button',{ //v-bind:class class:{ 'btn':true, 'btn-success':this.type === 'success', 'normal':!this.type }, //dom属性 domProps:{ innerText:this.text || '未传入按钮文字' }, //on => v-on }) }, } </script>
    <style scoped> .btn{ width: 200px; height: 50px; line-height: 50px; background: green; border-radius: 7px; border: none; } .btn-success{ background: goldenrod; } .normal{ background: red; } </style>

# 使用 #

<template>
      <div class="home">
        <div>
          <Button :type="'success'" :text="'botton'" />
        </div>
      </div>
    </template>
    
    <script> // @ is an alias to /src import Button from '@/components/button.vue' export default { name: 'Home', components: { Button } } </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221023/f7f2ee18c0cf4655a4536e4c6076150c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关 java自定义函数创建

自定义函数创建修饰符返回值类型方法名(参数类型参数名){ ... 方法体 ... retu

青旅半醒/ 2024年03月29日 15:11/ 0 赞/ 26 阅读

相关 mysql 函数参数 varchar_mysql--自定义函数使用

mysql语句模板语句： create function 函数名(\[参数列表\]) returns 数据类型 begin sql语句; return 值; en

落日映苍穹つ/ 2023年01月11日 13:23/ 0 赞/ 99 阅读

相关 mysql 创建函数_mysql中创建用户自定义函数

总有一些复杂的逻辑我们还需要多处使用，此时就显现出函数的重要性。 mysql函数的要素函数名参数列表函数体返回值定义语法 create function

雨点打透心脏的1/2处/ 2023年01月10日 15:59/ 0 赞/ 218 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 315 阅读

相关【基础】自定义函数

前言 Github：[https://github.com/yihonglei/road-of-arch/tree/master/thinking-in-mysql][h

谁践踏了优雅/ 2022年07月17日 00:14/ 0 赞/ 136 阅读

相关 minigui/mgncs:自定义渲染器(renderer)实现透明背景按钮(transparent button)

一般来说，对于`mStatic`,`mImage`这样的控件，只要设置了透明属性(`transparent=true`),就可以实现背景透明，但对于`mButton`按钮却不行

「爱情、让人受尽委屈。」/ 2022年05月13日 23:54/ 0 赞/ 249 阅读

相关创建用户自定义函数 SQL

<table style="table-layout:fixed;"> <tbody> <tr> <td> <div> <span st

太过爱你忘了你带给我的痛/ 2022年03月27日 08:40/ 0 赞/ 243 阅读

相关 Hive创建自定义函数

一、概述 1. 如果hive的内置函数不够用，用户也可以自己定义函数来使用，这样的函数称为hive的用户自定义函数，简称UDF 2. UDF使得Hive的可扩展性增强

妖狐艹你老母/ 2022年02月27日 15:30/ 0 赞/ 277 阅读

相关 Render渲染函数-深入应用

渲染函数是vue中的一个非常重要的功能。基本在个性化的展示上都会使用到。所以需要对其有较为深入的理解才行。之前写过一篇关于渲染的，算是基础。在随后的使用过程中，发现还需要更

雨点打透心脏的1/2处/ 2021年10月15日 12:21/ 0 赞/ 301 阅读

相关 iview,用render函数渲染

<Table border :columns="discountColumns" :data="discountData.rows"></Table> disc...

红太狼/ 2021年05月02日 14:47/ 0 赞/ 489 阅读