h5-editor/client/pages/editor/components/attr-configure/event-edit.vue

<template>
  <div class="components-attr-edit">
    <el-scrollbar class="components-attr-edit">
      <div class="attr-edit-inner" v-if="activeElementUUID">
        <div class="animate-edit-btn-wrapper">
          <el-dropdown>
            <el-button type="primary" size="small">
              添加事件<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in eventTypeList" :disabled="item.disabled" :key="index">
                <div @click="addEvent(item.value)">{{item.label}}</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <p class="gray inline-block fontsize-12 marginL10">事件在编辑模式下无效果</p>
        </div>
        <div class="el-animate-list-wrapper paddingT20" v-show="activeElement.events.length">
          <el-collapse accordion>
            <el-collapse-item v-for="(item, index) in activeElement.events" :key="index">
              <template slot="title">
                <span class="el-animate-title-name">事件 {{index + 1}}</span>
                <div class="el-animate-title-type-wrapper">
                  <span class="el-animate-title-type">{{item.type | getLabelText(eventTypeList)}}</span>
                </div>
                <span class="el-animate-title-btn" @click.stop.prevent="deleteEvent(index)"><i
                        class="el-icon-delete"></i></span>
              </template>
              <div class="el-animate-item">
                <div class="attr-item-edit-wrapper"  v-show="item.type !== 'share'">
                  <p>打开方式：</p>
                  <div class="col-1">
                    <el-radio-group v-model="item.target" size="small">
                      <el-radio-button label="_blank">新窗口</el-radio-button>
                      <el-radio-button label="_self">当前窗口</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <div class="attr-item-edit-wrapper" v-show="item.type !== 'share'">
                  <p class="attr-item-title">链接/接口url：</p>
                  <div class="col-1  attr-item-edit-input">
                    <el-input type="textarea" :rows="3" placeholder="请输入url" v-model="item.url" />
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div v-else>
        <p class="gray paddingT30 text-center">请在画板上选择需要编辑得元素</p>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
	import {mapState, mapGetters} from 'vuex'

	export default {
		name: "event-edit",
    data(){
			return {
				eventTypeList: [{
					label: '链接跳转',
          value: 'link',
          disabled: false
        }, {
					label: '分享',
					value: 'share',
          disabled: true
				}, {
					label: '表单提交',
					value: 'submitForm',
          disabled: true
				}]
      }
    },
		computed: {
			...mapState({
				projectData: state => state.editor.projectData,
				activePageUUID: state => state.editor.activePageUUID,
				activeElementUUID: state => state.editor.activeElementUUID
			}),
			...mapGetters([
				'currentPageIndex',
				'activeElementIndex',
				'activeElement',
				'activePage'
			])
		},
		methods: {
			/**
			 * 添加事件
			 * @param type 事件名称
			 */
			addEvent(type) {
        this.$store.dispatch('addElementEvent', type)
			},
			/**
			 * 删除事件
			 * @param index
			 */
			deleteEvent(index) {
				this.$store.dispatch('deleteElementEvent', index)
			},
		}
	}
</script>

<style lang="scss" scoped>
  .components-attr-edit {
    height: 100%;
  }

  .components-attr-animate-edit {
    position: relative;
  }

  .attr-title {
    font-weight: bold;
  }

  .attr-item-edit-wrapper {
    padding-left: 4px;
    display: flex;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      width: 80px;
      font-size: 12px;
      line-height: 28px;
    }
    .attr-item-edit-input {
      text-align: left;
      flex: 1;
    }
  }

  .el-animate-list-wrapper {
    .el-animate-title-name {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      font-weight: bold;
      width: 55px;
    }
    .el-animate-title-type-wrapper {
      display: inline-block;
      width: 190px;
    }
    .el-animate-title-type {
      display: inline-block;
      vertical-align: middle;
      max-width: 140px;
      height: 24px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #fafafa;
      border-radius: 60px;
      padding: 4px 20px;
      border: none;
      cursor: pointer;
      margin: 0 20px 0 10px;
      line-height: 14px;
    }
    .el-animate-title-btn {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #666;
      width: 24px;
      height: 24px;
      cursor: pointer;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
      margin-left: 6px;
      &:hover {
        color: white;
        background: $primary;
      }
    }
  }
</style>