常用Html代码块.html

<------------------------------------------------vue 封装的组件--------------------------------------------------------->
<my-portlet color="" title="">
	<my-tab-left slot="body" :tabs="tabs">
		<div slot="tabContent" class="tab-content">
			<div v-for="tab in tabs" :id="tab.id" class="tab-pane fade">
				<my-form v-if="$index===0" :show-error="true"
						 :form-id="'formBasic'"
						 :form-items="basicFormItems"
						 :ui-config="uiConfig"
						 :model="{registrationType:'b2b'}">
				</my-form>
				<!--columns需要name,type,data,display,className字段-->
				<my-table-modal v-if="$index===1"
					:ui-config="uiConfig"
					:action="{create:true,edit:true,delete:true}"
					:data-list="addressTab.addresses"
					:form-items="addressFormItems"
					:editing-obj="addressTab.editingAddress"
					:columns="addressFormItems"
					:id="&quot;Address&quot;"
					:auto-num="true"
					:modal="{title:uiConfig[&quot;Address Information&quot;],height:500}"
					@action="addressAction">
				</my-table-modal>
			</div>
		</div>
	</my-tab-left>
</my-portlet>


<------------------------------------------------vue--------------------------------------------------------->
var vm = new Vue({
	el:'#app',
	ready:function(){
	},
	data:{},
	methods:{},
});

<-----------------------------------------------vue-form-validate----------------------------------------------------------->
var uiMsg={};

function getFormData() {
	return {
		'basic': [
			{
				label: uiMsg['Qty3'],
                type: 'text',
                name: 'priceInfos.quantityC',
                data: '',
                required: true,
                disabled: false,
                format: 'digits',
			}
		],
	}
}

function getFormValidators(){
	return [
		{
            formID:'xxxformID',
			formData:xxxFormData,
			submitHandler:function(){
				// xxx action
			}
        },
	]
} 


<div v-for="item in formData.basic" class="form-group">
	<label class="control-label col-md-3">
		{{item.label}}
		<span v-if="item.required" class="required"> * </span>
	</label>
	<div class="col-md-9">
		<input v-if="item.type==='text'" :type="item.format==='digits'?'number':'text'" name="{{item.name}}" data-disabled="{{item.disabled?'disabled':''}}" class="form-control" />
		<span v-if="item.type==='text' && item.tip" class="help-block">{{item.tip}}</span>
		<select v-if="item.type === 'list'" :data-multiple="item.multiple?'multiple':''"  name="{{item.name}}" data-disabled="{{item.disabled?'disabled':''}}" class="form-control">
			<option v-for="opt in item.data" data-selected="{{opt.selected}}" value="{{opt.optValue}}">{{opt.optText}}</option>
		</select>
		<textarea v-if="item.type === 'area'" name="{{item.name}}" class="form-control"></textarea>
		<input v-if="item.type==='date'" type="text" name="{{item.name}}" class="form-control date-picker">
		<div v-if="item.type==='yesno'" class="radio-list" :data-error-container="'#error_yesno_'+item.name+$index">
			<label v-for="opt in item.data">
				<input type="radio" :name="item.name" value="{{opt.optValue}}">{{opt.optText}}
			</label>
		</div>
		<div v-if="item.type==='yesno'" :id="'error_yesno_'+item.name+$index"></div>
		<textarea v-if="item.type==='rich'" class="ckeditor form-control" name="{{item.name}}" :data-error-container="'#error_'+item.name+$index"></textarea>
		<div v-if="item.type==='rich'" :id="'error_'+item.name+$index"> </div>
	</div>
</div>
<------------------------------------------------have value--------------------------------------------------------->
<input v-if="item.type==='text'" :type="item.format==='digits'?'number':'text'" name="{{item.name}}" data-disabled="{{item.disabled?'disabled':''}}" class="form-control" :value="getDotProp(productData,item.name)"/>
<span v-if="item.type==='text' && item.tip" class="help-block">{{item.tip}}</span>
<select v-if="item.type === 'list'" :data-multiple="item.multiple?'multiple':''"  name="{{item.name}}" data-disabled="{{item.disabled?'disabled':''}}" class="form-control">
	<option v-for="opt in item.data" :data-selected="getOptSelectedTag(productData, item.name, opt.optValue, item.multiple)"  value="{{opt.optValue}}">{{opt.optText}}</option>
</select>
<textarea v-if="item.type === 'area'" name="{{item.name}}" class="form-control" :value="getDotProp(productData,item.name)"></textarea>
<input v-if="item.type==='date'" type="text" name="{{item.name}}" class="form-control date-picker" :value="getDotProp(productData,item.name)">
<div v-if="item.type==='yesno'" class="radio-list" :data-error-container="'#error_yesno_'+item.name+$index">
	<label v-for="opt in item.data">
		<input type="radio" :name="item.name" :data-checked="getOptCheckedTag(productData, item.name, opt.optValue)" value="{{opt.optValue}}">{{opt.optText}}
	</label>
</div>
<div v-if="item.type==='yesno'" :id="'error_yesno_'+item.name+$index"></div>
<textarea v-if="item.type==='rich'" class="ckeditor form-control" name="{{item.name}}" :data-error-container="'#error_'+item.name+$index" :value="getDotProp(productData,item.name)"></textarea>
<div v-if="item.type==='rich'" :id="'error_'+item.name+$index"> </div>


<------------------------------------------------modal--------------------------------------------------------->
$('#modal').modal('hide');	// hide, show,toglle

<a data-toggle="modal" href="#modal" />
<div id="modal" class="modal fade" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body">
				<div class="scroller" style="height:500px" data-always-visible="1" data-rail-visible1="1">
					
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn grey-cascade"></button>
				<button type="button" class="btn red-sunglo"></button>
			</div>
		</div>
	</div>
</div>


<------------------------------------------------portlet--------------------------------------------------------->
<div class="portlet box blue">
	<div class="portlet-title">
		<div class="caption font-white-sharp bold uppercase">
			Add Customer
		</div>
		<div class='actions'>
			
		</div>
	</div>
	<div class="portlet-body">
	</div>
</div>