Socket
Socket
Sign inDemoInstall

@94ai/codepen

Package Overview
Dependencies
0
Maintainers
0
Versions
218
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@94ai/codepen


Version published
Weekly downloads
767
increased by89.38%
Maintainers
0
Install size
6.02 kB
Created
Weekly downloads
 

Readme

Source

@94ai/codepen

common-ui组件库es.browser和umd.browser版本

HomePage

官网地址: https://oss.xccjh.top/common-ui/#/ai-index

Usage

importmap+common-ui.es.browser.js

common-ui支持原生es模块化使用,如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"> <!--  引入element-ui主题  -->
  <link rel="stylesheet" href="https://unpkg.com/@94ai/nf-theme-chalk@1.1.21/lib/css/index.css"> <!--  引入common-ui主题  -->
</head>
<body>

<script type="importmap">
{
  "imports": {
     "vue":"https://unpkg.com/vue@2.7.14/dist/vue.esm.browser.js",
     "common-ui":"https://unpkg.com/@94ai/common-ui@1.1.21/lib/codepen/common-ui.es.browser.js"
  }
}
</script>
<script type="module">
import {
  default as Vue
} from 'vue'
if (!window.Vue) {
  window.Vue = Vue
}
</script>
<script defer src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<script type="module">
import { NfButtonDemo, NfDoubleTime } from 'common-ui'
Vue.use(NfButtonDemo).use(NfDoubleTime)
new Vue({
  el: '#app'
})
</script>
<div id="app">
  <el-button>test element-ui</el-button>
  <nf-button-demo>test common-ui</nf-button-demo>
  <nf-double-time/>
</div>
</body>
</html>

效果如下:

直接在html中使用umd组件

如下引入对应主题包和库文件即可

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>umd demo</title>
  <script src="//unpkg.com/vue@2/dist/vue.js"></script> <!--  👈  引入vue  -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script> <!--  👈  引入element-ui的全量umd版本  -->
  <link rel="stylesheet" href="https://unpkg.com/@94ai/nf-theme-chalk@1.1.21/lib/css/index.css"> 
  <script src="https://unpkg.com/@94ai/common-ui@1.1.21/lib/codepen/common-ui.umd.browser.js"></script> <!--  👈  引入common-ui的全量umd版本  -->
</head>
<body>
<div id="app">
  <el-button>test element-ui</el-button>
  <nf-button-demo>test common-ui</nf-button-demo> <!--  👈 使用组件 -->
  <nf-double-time></nf-double-time>
</div>
</body>
<script>
const { default: CommonUI } = window['common-ui']
Vue.use(CommonUI)  // 👈  注册common-ui
new Vue().$mount('#app')
</script>
</html>

打开查看效果:

温馨提示 由于vue cdn通过file协议通常加载不到,推荐使用托管的形式打开,如npx http-server

Keywords

FAQs

Last updated on 08 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc