未命名 JaRnoA，HTML代码在线实时编辑、实时预览

index.html

global.css

main.js

App.vue

HelloBicool.vue

package.json

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <script type="module" src="./main.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

编辑器加载中

global.css

            
                1
2
3

            
            body {
  background-color: #fefefe;
}

编辑器加载中

main.js

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            import { createApp } from 'vue'
import './global.css'
import App from './App.vue'
import Antd, { message } from 'ant-design-vue';
import * as antIcons from '@ant-design/icons-vue';


createApp(App).mount('#app')
const app = createApp(App);
app.use(Antd).mount('#app');
console.log(["Hello 笔.COOL 控制台"])

编辑器加载中

App.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

            
            <script setup>
import HelloBicool from './HelloBicool.vue'
import { ref } from "vue"

  const showHello=ref()
  function open(){
    console.log('更新标签');
    showHello.value.show()
  }

</script>

<template>
  <div class="container">
<button @click='open()'>111</button>
    <HelloBicool :title="title" :descr="descr" ref='showHello'/>

   
    

  </div>
</template>

<style lang="scss" scoped>
$bg: #447aca;

.container {

  background: $bg;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.logo {
  height: 40px;
  width: 40px;
  margin-top: 20px;
}
</style>

编辑器加载中

HelloBicool.vue

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

            
            <script setup>
import { ref } from "vue"

   const visibleFlag = ref(false);
function show(params) {
  console.log('更新标签1111',visibleFlag.value);
  visibleFlag.value=true
  console.log('更新标签2222',visibleFlag.value);
}

  function onClose() {
    console.log('onClose');
    visibleFlag.value=false
  }


  defineExpose({
    show,
  });

</script>

<template>
<a-drawer
    width="50%"
    :open="visibleFlag"
    title="音频样本分析"
    @close="onClose()"
    class="cf-audio-analysis-modal"
  >
    11111111
</a-drawer>
</template>

<style lang="scss" scoped>

  .cf-audio-analysis-modal {
     color: #fff;
    // background: transparent !important;
    background: linear-gradient(58.2deg, #0d2153 5%, #133a81 49.3%, #0c2b64 97.7%) !important;
    // background: linear-gradient(66deg, #153483 -12%, #17469c 50.3%, #185edf 72%) !important;
    border: 0;
    z-index: 10;
    box-shadow:
      rgba(0, 0, 0, 0.26) 0px 10px 36px 0px,
      rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
    .ant-drawer-title {
      color: #000;
    }
}
  


  
</style>

编辑器加载中

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5
6

            
            {
    "dependencies": {
      "vue": "3.5.13",
      "ant-design-vue": "4.2.0"
    }
  }

编辑器加载中

预览

控制台