sugar-js

This is a library that provides responsive capabilities

Use

<div id="app">{{text}}</div>

const { maskSugar, useState } = SUGAR;
const app = makeSugar({
    bulk(){
        const [text,setText] = useState("");
        
        return {
            text
        }
    }
})
app.mount('#app')

s-for

<div s-for="(item,index) in list">
</div>

    const [list, setList] = useState([]);

s-if

<div s-if="show">
</div>

    const [show, setShow] = useState(false);

s-loading

<div s-loading="loading">
</div>

    const [loading, setLoading] = useState(false);

onMounted

onMounted(()=>{
  setText("update");
})

useEffect

const [text,setText] = useState("");
useEffect(()=>{
  console.log(text.value)
},[text])
onMounted(()=>{
  setText("update");
})

instance

<div instance="divRef"></div>
const divRef = instance();
console.log(divRef.value)

sugar-ui

app.install(sugarUI)
app.mount('#app')

sugar-dialog

<div id="app">
    <sugar-dialog :model="open">
       <div>
         <h1>Hello</h1>
       </div>
    </sugar-dialog>
</div>

const [open,setOpen] = useState(false);
setOpen(true)

sugar-upload

<sugar-upload @change="fileChange(item)">
  <sugar-button>上传</sugar-button>
</sugar-upload>

function fileChange(e) {
     console.log(e);
}

sugar-pagination

<sugar-pagination
            :pi="pi"
            :ps="ps"
            :total="total"
            page="2"
            style="margin-top: 10px"
            @change="changePage"
            :btn="true"
            :show-most="true">
</sugar-pagination>

const [pi, setPi] = useState(0);
const [total, setTotal] = useState(0);
const [ps, setPS] = useState(20);
function changePage(v) {
      setPi(v);
}

sugar-ui-tool

app.$.showToast("Hello");
app.$.showMessageBox({
  title:'Tips',
  content:'this is a tips',
  confirm(){
    
  },
  cancel(){
    
  },
  confirmText:'ok',
  cancelText:'cancel'
});

sugar-back-top

<sugar-back-top></sugar-back-top>