<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TEST</title>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/components.css">
<script src="libs/vue.js"></script>
<script src="extend.js"></script>
<script src="components/button.js"></script>
<script src="components/button-group.js"></script>
<script src="components/modal.js"></script>
<script src="components/notice.js"></script>
</head>
<body>
<div id="test">
<!--button-->
<!--<div style="margin:15px 0">
<cc-button>default</cc-button>
<cc-button @click="test()" onmouseup="alert(1)" class-type="primary" size="large">large</cc-button>
<cc-button class-type="primary">primary</cc-button>
<cc-button class-type="primary" size="small">small</cc-button>
<cc-button class-type="success">success</cc-button>
<cc-button class-type="info">info</cc-button>
<cc-button class-type="warn">warn</cc-button>
<cc-button class-type="error">warn</cc-button>
<cc-button class-type="bordered">bordered</cc-button>
<cc-button class-type="dashed">dashed</cc-button>
<cc-button class-type="link">link</cc-button>
<br><br>
<cc-button shape="circle">S</cc-button>
<cc-button class-type="primary" shape="circle">S</cc-button>
<cc-button class-type="success" shape="circle">success</cc-button>
<cc-button class-type="info" shape="circle" size="large">S</cc-button>
<cc-button class-type="warn" shape="circle" icon="fa fa-check fa-lg"></cc-button>
<cc-button class-type="error" shape="circle" icon="fa fa-cog fa-lg"></cc-button>
<cc-button class-type="bordered" shape="circle" icon="fa fa-trash-o fa-lg"></cc-button>
<cc-button class-type="dashed" shape="circle" icon="fa fa-bars fa-lg"></cc-button>
<br><br>
<cc-button class-type="info" size="large">S</cc-button>
<cc-button class-type="warn" icon="fa fa-check fa-lg"></cc-button>
<cc-button class-type="error" icon="fa fa-cog fa-lg"></cc-button>
<cc-button class-type="bordered" icon="fa fa-trash-o fa-lg"></cc-button>
<cc-button class-type="dashed" icon="fa fa-bars fa-lg"></cc-button>
<br><br>
<cc-button class-type="success" loading>submit</cc-button>
<cc-button class-type="primary" loading>submit</cc-button>
<cc-button class-type="bordered" loading>submit</cc-button>
<cc-button class-type="success" disabled>submit</cc-button>
<cc-button class-type="primary" disabled>submit</cc-button>
<cc-button class-type="bordered" disabled>submit</cc-button>
</div>-->
<!--buttonGroup-->
<!--<div style="margin:15px 0">
<cc-button-group>
<cc-button class-type="bordered">success</cc-button>
<cc-button class-type="bordered">info</cc-button>
<cc-button class-type="bordered">warn</cc-button>
<cc-button class-type="bordered">warn</cc-button>
</cc-button-group>
<cc-button-group size="large">
<cc-button class-type="success">success</cc-button>
<cc-button class-type="success">info</cc-button>
<cc-button class-type="success">warn</cc-button>
<cc-button class-type="success">warn</cc-button>
</cc-button-group>
<cc-button-group size="small">
<cc-button class-type="success">success</cc-button>
<cc-button class-type="info">info</cc-button>
<cc-button class-type="warn">warn</cc-button>
<cc-button class-type="error">warn</cc-button>
</cc-button-group>
<br><br>
<cc-button-group vertical>
<cc-button class-type="bordered">success</cc-button>
<cc-button class-type="bordered">info</cc-button>
<cc-button class-type="bordered">warn</cc-button>
<cc-button class-type="bordered">warn</cc-button>
</cc-button-group>
<cc-button-group size="large" vertical>
<cc-button class-type="error">success</cc-button>
<cc-button @click="test()" onmouseup="alert(1)" class-type="error">info</cc-button>
<cc-button class-type="error">warn</cc-button>
<cc-button class-type="error">warn</cc-button>
</cc-button-group>
<cc-button-group size="small" vertical>
<cc-button class-type="success">success</cc-button>
<cc-button class-type="info">info</cc-button>
<cc-button class-type="warn">warn</cc-button>
<cc-button class-type="error">warn</cc-button>
</cc-button-group>
</div>-->
<!--modal-->
<!--<div style="margin:15px 0">
<cc-button @click="testModal" class-type="success" size="large">弹框测试</cc-button>
<cc-modal v-model="showModal" @ok="closeModal('ok')" @cancel="closeModal('cancel')" ok-loading dragable custom-close>
<input type="text" v-model="testB">
</cc-modal>
<cc-modal v-model="showModal" @ok="closeModal('ok')" @cancel="closeModal('cancel')" ok-loading dragable custom-close>
<input type="text" v-model="testB">
</cc-modal>
<span>{{testA}}</span>
</div>
<cc-button type="button" class-type="error" size="large" onclick="openModalInstance()">重新打开弹框</cc-button>
<h1 id="modalTemplateId">测试ID模板弹框</h1>-->
<!--notice-->
<div style="margin:15px 0">
<cc-button class-type="success" @click="testNotice">测试Notice</cc-button>
<cc-button class-type="success" @click="testMessage">测试Message</cc-button>
</div>
</div>
<script>
// 弹框应用实例
new Vue({
el: "#test",
data: {
showModal: false,
testA: "子组件访问父级数据！",
testB: "",
},
mounted: function () {
// console.log(Vue,Vue.compile("<h1>测试HTML元素模板弹框</h1>"))
this.$nextTick(function () {
this.testB = this.testA
});
},
methods: {
test: function () {
console.log("test")
},
testModal: function () {
this.showModal = true
this.testB = this.testA
},
closeModal: function (eventName) {
var self = this;
if (eventName == "ok") {
setTimeout(function () {
self.testA = self.testB
console.log("修改成功！")
setTimeout(function () {
self.showModal = false;
}, 100);
}, 1000);
} else if (eventName == "cancel") {
setTimeout(function () {
console.log("取消修改！")
setTimeout(function () {
self.showModal = false;
}, 100);
}, 1000);
}
},
// 通知
testNotice: function () {
ccNotice({
noticeType: "Notice",
type: "success",
duration: 0,
width: "300",
title: "Test Notice",
content: "Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...",
closeable: true,
hasDetail: true
});
setTimeout(function () {
ccNotice({
noticeType: "Notice",
type: "info",
duration: 0,
width: "300",
title: "Test mutify Notice",
content: "Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...",
closeable: true,
hasDetail: true
});
}, 500);
setTimeout(function () {
ccNotice({
noticeType: "Notice",
type: "warn",
duration: 0,
width: "300",
title: "Test mutify Notice",
content: "Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...",
closeable: true,
hasDetail: true
});
}, 1000);
setTimeout(function () {
ccNotice({
noticeType: "Notice",
type: "error",
duration: 0,
width: "300",
title: "Test mutify Notice",
content: "Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...Notice Detail...",
closeable: true,
hasDetail: true
});
}, 1500);
},
testMessage: function () {
ccMessage({
type: "success",
width: "300",
title: "Test Message",
closeable: true
});
setTimeout(function () {
ccMessage({
type: "info",
width: "300",
title: "Test Message",
closeable: true
});
}, 500)
setTimeout(function () {
ccMessage({
type: "warn",
width: "300",
title: "Test Message",
closeable: true
});
}, 1000)
setTimeout(function () {
ccMessage({
type: "error",
width: "300",
title: "Test Message",
closeable: true
});
}, 1500)
}
}
});
/*var instance = ccModal({
template: "测试字符串模板弹框",
// template: "<h1>测试HTML元素模板弹框</h1>",
// template: "#modalTemplateId",
// template: "/testModalTemplateUrl.html",
title: "ModalInstance",
width: "800px",
okFn: function () {
setTimeout(function () {
console.log("点击确定延迟关闭");
instance.close();
}, 1000);
},
cancelFn: function () {
setTimeout(function () {
console.log("点击取消延迟关闭");
instance.close();
}, 1000);
},
// 如果okLoading设置为true，点击确定时就必须手动关闭弹框，即在okFn中加上 instance.close();
okLoading: true,
dragable: true,
showFooter: true,
footerAlign: "center",
closeOnEsc: false,
// 如果定义了customButtons，那么okFn、cancelFn、okLoading就会失效，就是说如果写了customButtons就不需要再写okFn、cancelFn、okLoading了
customButtons: [
// mark、text必填
{
mark: "cancel-1",
text: "自定义按钮一",
classType: undefined,
loading: false,
fn: function () {
setTimeout(function () {
console.log("自定义按钮一");
instance.close();
}, 1000);
}
},
{
mark: "cancel-2",
text: "自定义按钮二",
classType: undefined,
loading: false,
fn: function () {
setTimeout(function () {
console.log("自定义按钮二");
instance.close();
}, 1000);
}
},
{
mark: "ok",
text: "自定义按钮三",
classType: "success",
loading: true,
fn: function () {
instance.modal.$parent.customButtons[1].loading = true;
setTimeout(function () {
console.log("自定义按钮三");
instance.close();
setTimeout(function () {
// 调用另一个弹窗
var anotherInstance = ccModal();
}, 500);
}, 1000);
}
},
{
mark: "cancel-3",
text: "自定义按钮四",
classType: undefined,
loading: false,
fn: function () {
setTimeout(function () {
console.log("自定义按钮四");
instance.close();
}, 1000);
}
},
{
mark: "cancel-4",
text: "自定义按钮五",
classType: undefined,
loading: false,
fn: function () {
setTimeout(function () {
console.log("自定义按钮五");
instance.close();
}, 1000);
}
}
]
});
function openModalInstance() {
instance.open();
}
ccModal.confirm({
// width: props.width || "450px",
// title: props.title || "确认",
//"success","info","warn","error",
type: "info",
message: "你确定要删除这个条目吗？你确定要删除这个条目吗？",
// okFn: function () {
// console.log("confirm:确定")
// },
// cancelFn:function () {
// console.log("confirm:取消")
// },
// okLoading: true,
// dragable: true,
// showFooter: true,
// footerAlign: "right",
// closeOnEsc: true,
// customButtons: _props.customButtons
});*/
</script>
</body>
</html>test.html
猜你喜欢
转载自my.oschina.net/u/3288561/blog/1558261
今日推荐
周排行