VUEJS项目实践五之Dialog弹出框MessageBox(超好看的bootstrap样式)
发布日期:2021-05-10 11:42:30 浏览次数:12 分类:精选文章

本文共 2447 字,大约阅读时间需要 8 分钟。

���������������������������������������������������������������

  • ������ Vue ������������������������������

    ������������������������������������������ messagebox.vue������������������������������������������������

  • ������ CSS ������������

    ��������������������������� CSS ������������������������������������������������������������������ bootstrap ������������ CSS���

    .message-box {  position: fixed;  z-index: 1000;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  background: rgba(0, 0, 0, 0.5);  padding: 20px;  border-radius: 8px;  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  color: white;}.message-box-header {  padding: 15px 20px;  border-bottom: 1px solid #cccccc;}.message-box-title {  margin: 0;  font-size: 18px;  color: #fff;}.message-box-content {  padding: 20px;  font-size: 16px;}.message-box-btns {  display: flex;  justify-content: flex-end;  gap: 10px;}.btn-lime {  background-color: #4CAF50;  color: white;}.btn-dark {  background-color: #4e4e4e;  color: white;}.message-box-enter {  animation: enter 0.3s ease-out;}@keyframes enter {  from {    opacity: 0;    transform: translateY(-20px);  }  to {    opacity: 1;    transform: translateY(0);  }}@keyframes exit {  from {    opacity: 1;    transform: translateY(0);  }  to {    opacity: 0;    transform: translateY(20px);  }}
  • ���������������������

    ��� Vue ������������������������������ MessageBox ������������������ main.js ���������������������������������

    // src/assets/js/main.jsimport MessageBox from './components/MessageBox/messageBox'Vue.use(MessageBox)// ��� Vue ������������������this.$messageBox.showMsgBox({  title: '������',  content: '���������������������������'}).then(() => {  console.log('������������')}).catch(() => {  console.log('������������')})
  • ���������������

    ���������������������������������������������������������������������������������������������������������������������������������������

      
  • ������������������������������������������

    ��������������� sass-loader ��� node-sass ������������������������������������������������

    cnpm install sass-loader@7.0.3 surgically -Dcnpm install node-sass@4.7.2 -D

    ������������������������������������������������������������������������������������������������������������������������������������������������������

  • 上一篇:VUEJS项目实践六之No PostCSS Config found in
    下一篇:VUEJS项目实践四之自定义键盘指令(按键即获取焦点)

    发表评论

    最新留言

    留言是一种美德,欢迎回访!
    [***.207.175.100]2025年04月11日 15时56分06秒