為了方便使用者更好使用web組態，最近提供了使用者自定義元件的功能。在實施專案中就可以使用自己的元件了！

首先我們登陸系統就會看到新增的元件管理選項 如下圖：

《元件設計器》由 基礎設定（包括名稱 code 型別 狀態 icon 次序號 ）HTML編輯區域 CSS編輯區域 JS編輯區域 和預覽區域組成。

由於web組態是由vue開發的所以開發元件也需要vue的的基礎知識。建議去看下vue的教程及生命週期，以方便開發元件。以下我附上vue生命週期圖及元件程式碼。

HTML程式碼如下：

style="imrstyle"：樣式 在web組態設計器中呈現的樣式

v-show="controlProp.commProp.visible"：可見性 在web組態設計器中可實現顯示或閃爍

{{controlProp.textProp.text}}：文字 對應元件的文字屬性

更多屬性請參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

CSS程式碼如下：

.btn123 {      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);      box-sizing: border-box;      z-index: 1;    }        .btn123:hover {      animation: animate 8s linear infinite;    }        @keyframes animate {      0% {        background-position: 0%;      }      100% {        background-position: 400%;      }    }        .btn123::before {      content: '';      position: absolute;      top: -5px;      left: -5px;      right: -5px;      bottom: -5px;      z-index: -9999;      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);      background-size: 400%;      border-radius: 40px;      opacity: 0;      transition: 0.5s;    }        .btn123:hover::before {      filter: blur(20px);      opacity: 1;      animation: animate 8s linear infinite;    }        

JS程式碼如下：

export default {  props: {    controlProp: Object //作為web組態設計器的繼承屬性  },  data() {    return {    }  },  computed: {    imrstyle: function () {  //imrstyle 作為web組態設計器的控制樣式      let maxWidth = this.controlProp.commProp.width      let maxHeight = this.controlProp.commProp.height      if (this.controlProp.textProp && this.controlProp.textProp.padding) {        maxWidth = maxWidth - this.controlProp.textProp.padding * 2        maxHeight = maxHeight - this.controlProp.textProp.padding * 2      }      return {        // 'max-width': maxWidth+ 'px',        // 'max-height': maxHeight+ 'px',        width: '100%',        height: '100%',        'box-sizing': 'content-box',        background: 'transparent',        'color': this.controlProp.textProp ? this.controlProp.textProp.fontcolor : '',        'font-size': this.controlProp.textProp ? this.controlProp.textProp.fontsize + 'px' : '',        'text-align': this.controlProp.textProp ? this.controlProp.textProp.horizonalign : '',        'line-height': maxHeight + 'px',        'vertical-align': this.controlProp.textProp ? this.controlProp.textProp.verticalalign : '',        'font-family': this.controlProp.textProp ? this.controlProp.textProp.fontfamily : '',        'font-weight': this.controlProp.textProp ? (this.controlProp.textProp.fontweight ? 600 : 500) : '',        'font-style': this.controlProp.textProp ? (this.controlProp.textProp.fontitalic ? 'italic' : 'normal') : ''      }    }  },  created() {  },  mounted() {  },  methods: {    initImports() {      return {      }    },    initProp() {   //初始化狀態 （基礎屬性 特殊屬性 文字屬性）      return {        commProp: { // 基礎屬性            width: 80,          height: 30,          borderwidth: 0,          backgroundColor: 'linear-gradient(90deg, #03a9f4, #00FFFF)',          borderradius:5        },        spProp:{ // 特殊屬性          },        textProp: { // 文字屬性          text: 'Button',          fontsize: 12,          fontcolor: 'black',          horizonalign: 'center',          verticalalign: 'middle',          padding: 0,          margin: 0        },        spPropSetting: [ // 特殊屬性 textinput/numberinput/switch/select/colorPicker/codeInput/dateInput/imgSelect/setup        ]      }    }  }}

這裡需要注意：

initProp()：方法中實現對元件的 基礎屬性 文字屬性 特殊屬性的初始化配置

更多屬性配置參考：http://krmes.com:8000/md/design/#%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80%E5%B1%9E%E6%80%A7

這樣在我們的web組態中就可以使用我們自定義的元件了！