caimei365-www/src/main/resources/templates/supplier-center/encyclopedia/components/form-component.html

<!-- 图片上传 -->
<script type="text/html" id="imageUpload">
    <div class="cm image-upload">
        <template v-if="files.length > 0">
            <div class="image border" v-for="(file,index) in files" :key="files">
                <img :src="file.url" :alt="file.name"/>
                <span class="remove" @click="removeImage(file,index)">&times;</span>
            </div>
        </template>
        <div class="choose-image border" @click="handleClick" v-if="canChooseImage">
            <input type="file" ref="file" @change="handleChooseImage" :multiple="multiple" :accept="accept"/>
            <span>{{ placeholder }}</span>
        </div>
    </div>
</script>
<!-- 单选组件 -->
<script type="text/html" id="radio">
    <div class="cm radio" :class="{checked:isChecked}" @click="handleClick">
        <slot></slot>
    </div>
</script>
<!-- 下拉组件Select -->
<script type="text/html" id="select">
    <div class="cm select" @click.stop="optionsVisible = !optionsVisible">
        <input type="text" class="cm input border" :placeholder="placeholder" v-model="label"/>
        <span class="cm-icon iconfont " :class="optionsVisible ? 'icon-arrow-up' : 'icon-arrow-down'"></span>
        <div class="options border radius shadow" v-show="optionsVisible">
            <slot></slot>
        </div>
    </div>
</script>
<!-- 下拉子组件Option -->
<script type="text/html" id="option">
    <div class="cm option" @click.stop="handleClick">{{ label }}</div>
</script>
<!-- 文本框组 -->
<script type="text/html" id="inputGroup">
    <div class="input-group">
        <span class="add-btn" @click.stop="handleAddOnce" v-if="addText">{{ addText }}</span>
        <div class="cm form-group" v-for="(item, index) in showList" :key="index">
            <input type="text" class="cm input  border valid-control" v-model="item[keyMap.key]" :placeholder="getPlaceholder(index).label"/>
            <input type="text" class="cm input  border valid-control" v-model="item[keyMap.value]" :placeholder="getPlaceholder(index).value"/>
            <span class="remove" v-if="showList.length > minLimit" @click.stop="handleRemove(item, index)">&times;</span>
        </div>
    </div>
</script>
<!--常见问题-->
<script type="text/html" id="questionGroup">
    <div class="question-group">
        <span class="add-btn" @click.stop="handleAddOnce" v-if="addText">{{ addText }}</span>
        <div class="cm form-group" v-for="(item, index) in showList" :key="index">
            <div class="question">
                <div class="form-label"><em>*</em><span>问题{{ index +1 }}</span></div>
                <input type="text" class="cm input max border valid-control hello" v-model="item[keyMap.key]" :placeholder="getPlaceholder(index).label"/>
            </div>
            <div class="answer">
                <div class="form-label"><em>*</em><span>答</span></div>
                <textarea type="text" class="cm textarea border max no-resize valid-control" rows="3" v-model="item[keyMap.value]" :placeholder="getPlaceholder(index).value"></textarea>
            </div>
            <span class="remove" v-if="showList.length > minLimit" @click.stop="handleRemove(item)">&times;</span>
        </div>
    </div>
</script>